<template>
    <div id="PM">
      
      <div id="p_top_box">
        <div class="top_l">
          <label for="">
            <span>任务ID：</span>
            <input type="text" class="Mid">
          </label>
          <label for="">
            <span>订单提交日期：</span>
            <Row>
              <Col span="12">
                <DatePicker v-model="Data.timeOne" type="daterange" :options="options2" placement="bottom-start" placeholder="请输入搜索区间" style="width: 200px;height:36px"></DatePicker>
              </Col>
            </Row>
          </label>

          <label for="">
            <span>支付方式：</span>
            <Select v-model="Data.model8" clearable style="width:200px">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </label>

          <label for="">
            <span>
              任务状态：
            </span>
            <Select v-model="Data.RenStatus" clearable style="width:200px">
              <Option v-for="item in PayListS" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </label>

          <label for="">
            <span>
              交易状态：
            </span>
            <Select v-model="Data.payState" clearable style="width:200px">
              <Option v-for="item in PayList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </label>

          <label for="">
            <span>
              开票状态：
            </span>
            <Select v-model="Data.PiaoStatus" clearable style="width:200px">
              <Option v-for="item in PiaoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </label>
        </div>
        <div class="top_r">
          <span>搜索</span>
          <span>清空</span>
        </div>
      </div>
      <div>
        <div class="contjoin_quanxuan">
					<input type="checkbox" name="twoall" class="xuan_all" />
					<span>全选：<i style="color: #E94747;">批量开票</i> 请先在左侧选中要开票的订单，一次最多可选20个订单</span>
			  </div>
        <div class="Tab_tepa">
          <ul class="tepa">
            <li style="width:6%" class="thli_1">序号</li>
						<li style="width:16%" class="thli_2">订单号</li>
						<li style="width:16%" class="thli_3">订单提交时间</li>
						<li style="width:10%" class="thli_4">消费金额</li>
						<li style="width:10%" class="thli_5">支付方式</li>
						<li style="width:10%" class="thli_7">交易状态</li>
						<li style="width:10%" class="thli_8">开票状态</li>
						<li style="width:22%" class="thli_9">操作</li>
          </ul>
          <ul class="t_one" v-for="(item,index) in Kdata" :key="index">
            <li style="width:6%" class="thli_1">
              <input v-if="item.isInvoice == 0" type="checkbox"/>
              <span>{{index}}</span>
            </li>
						<li style="width:16%" class="thli_2">{{item.outTradeNo}}</li>
						<li style="width:16%" class="thli_3">{{item.createTime/1000}}</li>
						<li style="width:10%" class="thli_4">{{item.price}}</li>
						<li style="width:10%" class="thli_5">{{item.payType}}</li>
						<li style="width:10%" class="thli_7">{{item.orderType}}</li>
						<li style="width:10%" class="thli_8">{{item.isInvoice}}</li>
						<li style="width:22%" class="thli_9">
							<span style="color:#6699FF;cursor: pointer;display: none;">开票</span>
              <span style="margin: 0 5px;display: none;">|</span>
              <span style="color:#6699FF;cursor: pointer;" @click="showK = true">继续支付</span>
              <span style="margin: 0 5px;">|</span>
              <span style="color:#6699FF;cursor: pointer;">
                <a href="#/OrderXq?id=123" target="_blank">查看详情</a>
              </span>
              <span style="margin: 0 5px;">|</span>
              <span style="color:#E94747; cursor: pointer;" @click="ClooseOder(item,index)">关闭订单</span>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="contjoin_money contjoin_money_two hidden-block">
					<span class="opening_more_two" style="cursor: pointer;">批量开票</span>
					<span>有<em id="canApplyDataTwo">0</em>个订单可申请发票，已选<em id="chooseOrderSumTwo">0</em>个订单</span>
					<span><em>已选金额</em><em><i id="orderPriceTwo">¥0</i></em></span>
				</div>
      </div>

      <div style="text-align: center;">
        <Page :total="20" show-elevator @on-change="ChangePage" @keyup.enter="ChangePage"/>
      </div>

      <Modal title="开票信息确认" v-model="showK" :style="{top:'60px'}" @on-ok="IsOk"  @on-cancel="ClearnModel">
        <div class="mone">
          <h4>开票内容</h4>
          <p>
            开票金额：<span style="color:red">￥66.26</span>&nbsp;&nbsp;&nbsp;&nbsp;您选取了1张订单，金额将合并在一张票据中。
          </p>
          <p>开票内容：<span>信息服务费。</span></p>
        </div>
        <div class="mtwo">
          <h4>
            发票信息
            <p>请核实发票信息是否正确，如果不正确，请前往
              <a href="">"发票信息管理"</a>修改
            </p>
          </h4>
          <p>开具类型：<span>个人</span></p>
          <p>姓&nbsp;&nbsp;&nbsp;&nbsp;名：<span>一拉各的 骄傲骄傲</span></p>
          <p>身份证号：<span>321564168505160325</span></p>
          <p>邮寄地址：<span>上海市东方明珠广播电视塔36号9楼1025</span></p>
          <p>联系人姓名：<span>李云龙</span></p>
          <p>联系人电话：<span>15617801519</span></p>
        </div>
        <p class="info" style="color:red">发票申请通过后会在30个工作日内寄出</p>
      </Modal>
      <!-- //关闭订单 -->
      <Modal title="提示" v-model="clooseD" 
       :style="{top:'60px'}" 
       @on-ok="IsOkD"  
       @on-cancel="ClearnModel">
       <p style="text-align: center; font-size:18px">是否关闭订单？</p>
      </Modal>
    </div>
</template>
<script>
export default {
  data() {
    return {
      showK: false,
      clooseD: false,
      options2: {
        shortcuts: [
          {
            text: "本周",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "本月",
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          }
        ]
      },
      cityList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "支付宝",
          label: "支付宝"
        }
      ],
      PayList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "等待支付",
          label: "等待支付"
        },
        {
          value: "交易成功",
          label: "交易成功"
        },
        {
          value: "交易关闭",
          label: "交易关闭"
        },
        {
          value: "退款成功",
          label: "退款成功"
        }
      ],
      PiaoList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "开票中",
          label: "开票中"
        },
        {
          value: "已开票",
          label: "已开票"
        },
        {
          value: "未开票",
          label: "未开票"
        }
      ],
      PayListS: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "代付款",
          label: "代付款"
        },
        {
          value: "申请中",
          label: "申请中"
        },
        {
          value: "申请取消",
          label: "申请取消"
        },
        {
          value: "申请失败",
          label: "申请失败"
        },
        {
          value: "申请成功",
          label: "申请成功"
        }
      ],
      /////////////////
      Data: {
        timeOne: "",
        model8: "",
        payState: "",
        PiaoStatus: "",
        RenStatus:''
      },
      //eg//
      Kdata: [
        {
          createTime: 1542335295000,
          id: 297,
          isInvoice: 1,
          modifyTime: 1542335295000,
          orderStatus: 0,
          orderType: 1,
          outTradeNo: "c0f2db2a7ad1495e9c6e24b5bc26bc2a",
          payType: 1,
          price: 10,
          userId: 139
        },
        {
          createTime: 2018 - 12 - 22,
          id: 298,
          isInvoice: 0,
          modifyTime: 1542335295000,
          orderStatus: 0,
          orderType: 1,
          outTradeNo: "c0f2db2a7ad1495e9c6e24b5bc26bc2a",
          payType: 1,
          price: 10,
          userId: 139
        }
      ],
      // 关闭订单
      oderCloose: null
    };
  },
  computed: {
    Switches() {
      return this.$store.state.comm.XIAOFEI;
    }
  },
  watch: {
    Switches(val) {
      if (val == 2) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("this", "2");
    },
    ChangePage(index) {
      console.log("val", index);
    },
    IsOk() {},
    ClearnModel() {},
    ClooseOder(item, index) {
      this.clooseD = true;
      this.oderCloose = item;
    },
    // 关闭订单
    IsOkD() {
      console.log(this.oderCloose);
    }
  }
};
</script>
<style scoped>
.Mid {
  height: 36px;
  border: 1px solid #efe8e8;
  border-radius: 5px;
}
.info {
  text-align: center;
  margin: 2%;
}
.mtwo h4 {
  margin-bottom: 10px;
  border-bottom: 1px solid gray;
  padding: 4px 0;
}
.mtwo h4 p {
  font-size: 14px;
  margin-left: 10px;
  padding: 4px;
  color: rgb(192, 182, 182);
}
.mtwo p {
  font-size: 14px;
  margin-left: 10px;
  padding: 4px;
}
.mtwo p span {
  margin-left: 10px;
}
.mone {
  margin-bottom: 10px;
}
.mone h4 {
  margin-bottom: 10px;
}
.mone p {
  margin: 4px 0;
}
.mone p span {
  margin-left: 14px;
}
#orderPriceTwo {
  font-size: 16px;
  color: red;
  margin-left: 6px;
}
.contjoin_money {
  height: 40px;
}
.opening_more_two {
  background-color: #6081ff;
  font-size: 14px;
  color: white;
  padding: 8px 16px;
  margin: 4px;
  border-radius: 5px;
}
.thli_1 {
  position: relative;
}
.thli_1 input {
  position: absolute;
  left: 8px;
}
.Tab_tepa {
  width: 100%;
  /* border: 1px solid black; */
  margin: 10px 0;
}
.Tab_tepa ul.tepa,
.t_one {
  overflow: hidden;

  background-color: #f9f9f9;
  padding: 8px 0;
}
.t_one {
  margin-top: 6px;
}
.t_one li {
  float: left;
  font-size: 14px;
  text-align: center;
}
.Tab_tepa ul.tepa li {
  float: left;
  font-size: 16px;
  text-align: center;
}
#PM {
  padding: 0 16px;
  height: 100%;
}
#p_top_box {
  overflow: hidden;
  /* height: 100%; */
}
.top_l {
  float: left;
  width: 86%;
  overflow: hidden;
}
.top_l label {
  margin: 6px 0;
  float: left;
  margin-right: 12px;
  height: 41px;
}
.top_l label span {
  line-height: 32px;
  vertical-align: middle;
  float: left;
  font-size: 14px;
}
.top_r {
  float: left;
  width: 14%;
}
.ivu-row {
  display: inline-block !important;
}
.top_r span {
  display: inline-block;
  width: 70px;
  height: 32px;
  background: #6081ff;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
}
.top_r span:last-child {
  background-color: white;
  color: #6081ff;
  border: 0.6px solid #6081ff;
  line-height: 30px;
}
.thli_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>


